<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>hui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="data/layui/css/layui.css"  media="all">
</head>
<body>
<span id="span_name">I LOVE YOU SO MUCH</span><br/>
<button  id="touch_me" class="layui-btn" >touch me</button>

<form class="layui-form" id="test" style="display:none" method="post" onSubmit="return test_form();">
  <div class="layui-form-item">
    <label class="layui-form-label">你的名字</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="on" class="layui-input" id="username" style="width:100px">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">你的生日</label>
<!--    <div class="layui-input-inline">-->
<!--      <input type="date" name="birthday" required lay-verify="required" placeholder="请输入密码" autocomplete="on" class="layui-input">-->
<!--    </div>-->
        <div class="layui-input-inline">
          <input id="datetime" name="birthday" required lay-verify="required" placeholder="请输入生日" autocomplete="on" class="layui-input">
        </div>

    <div class="layui-form-mid layui-word-aux">公历</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">艰难的抉择</label>
    <div class="layui-input-block">
      <select name="quiz" lay-search>
        <option value="">请选择</option>
<!--        <optgroup label="你最喜欢的城市？">-->
<!--          <option value="南昌">南昌</option>-->
<!--          <option value="广州">广州</option>-->
<!--          <option value="广州">其他</option>-->
<!--        </optgroup>-->
        <optgroup label="你最喜欢的帅哥？">
          <option value="唐唐猪1">唐唐猪</option>
          <option value="唐唐猪2">唐唐猪</option>
          <option value="唐唐猪3">唐唐猪</option>
        </optgroup>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">爱好</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[1]" value="吃饭" title="吃饭" lay-skin="primary">
      <input type="checkbox" name="like[2]" value="睡觉" title="睡觉" checked lay-skin="primary">
      <input type="checkbox" name="like[3]" value="打豆豆" title="打豆豆" lay-skin="primary">
      <input type="checkbox" name="like[4]" value="逛街" title="逛街" lay-skin="primary">
      <input type="checkbox" name="like[5]" value="购物" title="购物" lay-skin="primary">
      <input type="checkbox" name="like[6]" value="踩马路" title="踩马路" lay-skin="primary">
      <input type="checkbox" name="like[7]" value="唐唐猪" title="唐唐猪" lay-skin="primary">
    </div>
  </div>
<!--  <div class="layui-form-item">-->
<!--    <label class="layui-form-label">开关</label>-->
<!--    <div class="layui-input-block">-->
<!--      <input type="checkbox" name="switch" lay-skin="switch" lay-text="开启|关闭">-->
<!--    </div>-->
<!--  </div>-->
  <div class="layui-form-item">
    <label class="layui-form-label">喜欢唐唐猪吗</label>
    <div class="layui-input-block">
      <input type="radio" name="like" value="喜欢1" title="喜欢">
      <input type="radio" name="like" value="喜欢2" title="喜欢" checked>
    </div>
  </div>
<!--  <div class="layui-form-item layui-form-text">-->
<!--    <label class="layui-form-label" >喜欢的水果</label>-->
<!--    <div class="layui-input-block">-->
<!--      <textarea lay-verify="required" name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>-->
<!--    </div>-->
<!--  </div>-->

  <div class="layui-form-item">
    <div class="layui-input-block">
      <input type="hidden" name="act" value="love title="喜欢">
      <button  class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>



<script src="data/layui/layui.all.js"></script>
<script src="data/jquery-2.0.2.min.js"></script>
<script>
  var phoneWidth = parseInt(window.screen.width);
  var phoneHeight = parseInt(window.screen.height);
  var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率
  var ua = navigator.userAgent;
  if (/Android (\d+\.\d+)/.test(ua)) {
    var version = parseFloat(RegExp.$1);
    // andriod 2.3
    if (version > 2.3) {
      document.write('<meta name="viewport" content="width=device-width,initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+',user-scalable=no">');
      // andriod 2.3以上
    } else {
      document.write('<meta name="viewport" content="width=device-width,user-scalable=no">');
    }
    // 其他系统
  } else {
    document.write('<meta name="viewport" content="width=device-width, initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale ='+phoneScale +',user-scalable=no,">');
  }
</script>
<script type="text/javascript" language="javascript">
  // 禁止load使用缓存页面
  $.ajaxSetup ({
    cache: false //close AJAX cache
  });

  layui.use('laydate', function(){
    var laydate = layui.laydate;

    //执行一个laydate实例
    laydate.render({
      elem: '#datetime' //指定元素
    });
  });



</script>
<script>


    function openAlert(){
      layer.open({
        type:1,
        area:['500px','600px'],
        title: '这是一份魔法表单，答案也是充满魔力的'
        ,content: $("#test"),
        shade: 0,
        btn: ['喜欢', '讨厌']
        ,btn1: function(index, layero){
          var data = $("#test").serialize();
          layer.alert('好巧我也喜欢你');

        },
        btn2: function(index, layero){
          layer.alert('你的话要反着听');
          return false;
        },
        cancel: function(layero,index){
          layer.confirm('好好休息，我下去吃饭饭哦，爱你', {icon: 3, title:'love you'}, function(index){
            layer.closeAll();
            // layer.close(index);
          });
          $("#test").remove();

        }

      });
    }

    $(function(){
      openAlert();

    })

    $('#touch_me').click(function(){
      layer.alert($('#span_name').html(),function () {
        location.reload();
        // openAlert();
      });
    })


  function test_form(){
    var data = $("form").serialize();
    $.post('act/love.php?act=index', {data}, function(res){
      layer.alert('【' + res.data + '】' + $('#span_name').html());
    },'JSON')
    return false;
  }

</script>